<template>
  <div class="login-view">
    <h2 class="title">欢迎回来</h2>
    <p class="subtitle">请登录您的账号继续使用</p>
    
    <form class="login-form" @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">用户名</label>
        <div class="input-wrapper">
          <Icon icon="mdi:account-outline" />
          <input 
            id="username"
            v-model="username"
            type="text"
            placeholder="请输入用户名"
            required
          />
        </div>
      </div>
      
      <div class="form-group">
        <label for="password">密码</label>
        <div class="input-wrapper">
          <Icon icon="mdi:lock-outline" />
          <input
            id="password"
            v-model="password"
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入密码"
            required
          />
          <Icon 
            class="toggle-password"
            :icon="showPassword ? 'mdi:eye-off' : 'mdi:eye'"
            @click="showPassword = !showPassword"
          />
        </div>
      </div>

      <div class="form-actions">
        <label class="remember-me">
          <input type="checkbox" v-model="rememberMe">
          <span>记住我</span>
        </label>
        <a href="#" class="forgot-password">忘记密码？</a>
      </div>

      <button type="submit" class="submit-btn" :disabled="authStore.loading">
        <span v-if="!authStore.loading">登录</span>
        <Icon v-else icon="eos-icons:loading" class="loading-icon" />
      </button>
    </form>

    <p class="register-link">
      还没有账号？
      <router-link to="/auth/register">立即注册</router-link>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icon } from '@iconify/vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import { message } from '@/services/message'

const router = useRouter()
const authStore = useAuthStore()

const username = ref('')
const password = ref('')
const showPassword = ref(false)
const rememberMe = ref(false)

const handleLogin = async () => {
  try {
    const success = await authStore.login(username.value, password.value, rememberMe.value)
    if (success) {
      message.success('登录成功')
      router.push('/chat')
    } else {
      message.error('登录失败，请检查用户名和密码')
    }
  } catch (error) {
    if (error instanceof Error) {
      message.error(error.message)
    } else {
      message.error('登录失败，请稍后重试')
    }
  }
}
</script>

<style lang="scss" scoped>
.login-view {
  .title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: center;
  }

  .subtitle {
    color: #666;
    text-align: center;
    margin-bottom: 32px;
    
    .dark-mode & {
      color: #999;
    }
  }
}

.login-form {
  .form-group {
    margin-bottom: 24px;

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
    }

    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;

      .iconify {
        position: absolute;
        left: 12px;
        color: #666;
      }

      input {
        width: 100%;
        padding: 12px 12px 12px 40px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        transition: all 0.3s ease;

        &:focus {
          border-color: #42b883;
          box-shadow: 0 0 0 2px rgba(66, 184, 131, 0.2);
        }
      }

      .toggle-password {
        position: absolute;
        right: 12px;
        cursor: pointer;
      }
    }
  }

  .form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .remember-me {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .forgot-password {
      color: #42b883;
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .submit-btn {
    width: 100%;
    padding: 12px;
    background: #42b883;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #3aa876;
    }

    &:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }

    .loading-icon {
      animation: spin 1s linear infinite;
    }
  }
}

.divider {
  text-align: center;
  margin: 24px 0;
  position: relative;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background: #ddd;
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
  }

  span {
    background: white;
    padding: 0 12px;
    color: #666;
    
    .dark-mode & {
      background: #2d2d2d;
      color: #999;
    }
  }
}

.social-login {
  .social-btn {
    width: 100%;
    padding: 12px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #f5f5f5;
    }
  }
}

.register-link {
  text-align: center;
  margin-top: 24px;

  a {
    color: #42b883;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 